<template>
  <view class="home-item">
    <view class="home-search-container" @click="goToSearch()">
      <search ></search>
    </view>
    <swiper class="swiper-home" indicator-dots="true" autoplay="true" interval="2000"
            circular="true" indicator-color="#000" indicator-active-color="#FF0000">
      <swiper-item v-for="(item,index) in bannerList" :key="index">
        <navigator :url="'/subpkg/goods-detail/goods-detail?goodid='+item.id">
          <image :src="item.picUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 商品分类 -->
    <view class="cates">
      <view class="cate-item" v-for="(cateItem,cateIndex) in cateList" :key="cateIndex" @click="gotoCate(cateItem)">
        <image :src="cateItem.catePic"></image>
        <text>{{cateItem.cateName}}</text>
      </view>
    </view>

    <!-- 楼层部分的页面结构 -->
    <view class="floor-list">
      <view v-for="(floorItem,floorIndex) in floorList" :key="floorIndex" class="floor-item">
        <view class="floor-title">{{floorItem.floor_title}}</view>
        <view class="floor-con">
          <view v-for="(floorSubItem,floorSubIndex) in floorItem.floor_con" class="sub-item">
            <navigator :url="floorSubItem.url">
              <image :src="floorSubItem.imgPic"></image>
              <view class="proname">{{floorSubItem.name}}</view>
              <view class="proprice">￥{{floorSubItem.price}}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      // banner
      bannerList: [],
      // 分类列表
      cateList: [],
      // 楼层
      floorList:[]
    };
  },
  methods: {
    // 获取banner
    async getBannerList() {
      const {
        data: res
      } = await uni.$http.get('/bannerlist')
      if (res.status !== 200) {
        return uni.showToast({
          title: '数据加载失败',
          icon: 'none',
          duration: 1000
        })
      }
      this.bannerList = res.data.list
    },
    // 获取分类列表
    async getCateList() {
      const {
        data: res
      } = await uni.$http.get('/cates')
      if (res.status != 200) {
        return uni.showToast({
          title: '数据加载失败',
          icon: 'none',
          duration: 1000
        })
      }
      this.cateList = res.data.cateList
    },
    // 跳转到分类页处理方法
    gotoCate(cateItem) {
      if (cateItem.cateName == "分类") {
        uni.switchTab({
          url: '/pages/cate/cate'
        })
      }
    },
    // 获取楼层方法
    async getFloorList() {
      const {
        data: res
      } = await uni.$http.get('/floors')
      if (res.status !== 200) {
        return uni.showToast({
          title: '数据加载失败',
          icon: 'none',
          duration: 1000
        })
      } else {
        // 将获取到的楼层中的每个商品添加自定义url属性，用来进行页面跳转
        res.data.floorList.forEach(product => {
          product.floor_con.forEach(subProduct => {
            subProduct.url = "/subpkg/goods-list/goods-list?name=" + subProduct.name
          })
        })
        this.floorList = res.data.floorList
      }

    },
    // 搜索框的事件
    goToSearch:function(){
      uni.navigateTo({
        url:'/subpkg/goods-search/goods-search'
      })
    },

  },
  onLoad() {
    // 页面加载调用getBannerList()获取Banner数据
    this.getBannerList()
    // 页面加载调用getCateList()获取分类数据
    this.getCateList()

    this.getFloorList()
  }
}
</script>

<style lang="scss">
.swiper-home{
  width:100%;
  background-color: #E43D33;
  swiper-item{
    width:100%;
    image{
      width:100%;
      height:300rpx;
    }
  }
}
.cates{
  width:100%;
  height:320rpx;
  border-bottom:1rpx solid #C7C7C7;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  .cate-item{
    width:20%;
    height:150rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    image{
      width:78rpx;
      height:78rpx;
    }
  }
}
.floor-list{
  width:100%;
  .floor-item{
    width:100%;
    height:840rpx;
    background-color: #f5f5f5;
    .floor-title{
      color: white;
      height:60rpx;
      line-height: 60rpx;
      font-weight: 900;
      padding-left: 6rpx;
      background: #f83d3a;
      margin-bottom: 10rpx;
    }
    .floor-con{
      width:100%;
      height:400rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .sub-item{
        background: #FFFFFF; // 设置卡片背景色
        width: 43%; // 设置卡片宽度
        height: auto; // 设置高度为自适应

        margin-bottom: 20rpx; // 添加底部间距
        padding: 16rpx; // 添加内边距
        border-radius: 16rpx; // 添加圆角

        box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1); // 添加阴影效果

        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        image{
          width:220rpx;
          height:220rpx;
        }
      }
    }

  }
}
.home-search-container{
  position: sticky;
  top:0;
  z-index: 999;
}
</style>
